<template>
  <div class="box">
    <h5>猜你喜欢</h5>
    <div class="nav">
      <p @click="sort3">综合排序↓</p>
      <p @click="sort1">距离最近</p>
      <p @click="sort2">销量最高</p>
      <p>筛选</p>
    </div>
    <div class="tuijian">
      <div>年货节热卖</div>
      <div>津贴联盟</div>
      <div>满减优惠</div>
      <div>品质联盟</div>
    </div>
    <div class="list">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="goshop(item)"
      >
        <div class="left">
          <div class="tu">
            <img :src="item.picUrl" alt="" />
          </div>
        </div>
        <div class="right">
          <h5>{{ item.name }}</h5>
          <div class="fankui">
            <span class="pingfen">⭐{{ item.wmPoiScore/10 }}</span> 
            <span class="xiaoliang">{{ item.monthSalesTip }}</span>
          </div>
          <div class="peisong">
            <span>{{ item.minPriceTip }}</span>
            <div class="you">
              <span>{{ item.deliveryTimeTip }}</span>
              <span>{{ item.distance }}</span>
            </div>
          </div>
          <div class="pingjia">
            <span>30-5</span>
          </div>
          <div class="youhuiquan">
            <span>70减35</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import logo from "../../img/pic.png";
import { shop_list } from "../../../api/index.js";

export default {
  methods: {
    //点击店铺，跳转到店铺详情页
    goshop(item){
      console.log(item.mtWmPoiId);
      this.$router.push( {path:'/shop/'+ item.mtWmPoiId} );
    },
    paixu(property) {
      return function (a, b) {
        var value1 = parseInt(a[property]);
        var value2 = parseInt(b[property]);
        return value1 - value2;
      };
    },
    paixu2(property) {
      return function (a, b) {
        var s1 = a[property].substr(2);
        var s2 = b[property].substr(2);
        var value1 = s1;
        var value2 = s2;
        return value2 - value1;
      };
    },
    // 距离排序
    sort1() {
      this.list.sort(this.paixu("distance"));
      // console.log("distance");
    },
    // 销量排序
    sort2() {
      this.list.sort(this.paixu2("monthSalesTip"));
    },

    // 综合排序
    sort3() {
      shop_list().then((res) => {
        console.log(res.data.list);
        this.list = res.data.list;
      });
    },
  },
  mounted() {
    shop_list().then((res) => {
      console.log(res.data.list);
      this.list = res.data.list;
    });
  },
  data() {
    return {
      list: [],
      lists: [],
    };
  },
};
</script>

<style scoped>
.box {
  margin: 10px;
}
.box h5 {
  font-size: 15px;
}
.box .nav {
  margin: 10px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}
.box .tuijian {
  display: flex;
  justify-content: space-between;
}
.box .tuijian div {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  background-color: rgb(229, 229, 231);
}
.list {
  margin-top: 15px;
}

.list .item {
  display: flex;
  margin-bottom: 20px;
}
.list .item .left .tu {
  width: 80px;
  height: 80px;
  background-color: pink;
}
.list .item .left .tu img {
  width: 100%;
}
.list .item .right {
  margin-left: 10px;
  flex: 1;
}
.list .item .right h5 {
  font-size: 14px;
}
.list .item .right .fankui {
  margin-top: 10px;
  font-size: 12px;
  color: gray;
}
.list .item .right .peisong {
  font-size: 12px;
  margin-top: 5px;
  color: gray;
}
.list .item .right .peisong .you {
  float: right;
}
.list .item .right .pingjia,
.youhuiquan {
  font-size: 12px;
  margin-top: 10px;
}
.list .item .right .pingjia span {
  background-color: beige;
  margin-right: 8px;
  padding: 0 2px;
  box-sizing: border-box;
  border-radius: 2px;
  color: rgb(251, 65, 65);
}
.list .item .right .youhuiquan span {
  margin-right: 8px;
  color: rgb(251, 84, 84);
  border-radius: 2px;

  border: 1px solid red;
}
</style>